<template>
<div>
  <b-img class="mb-4" src="~images/banner-1.jpg" fluid/>
  <b-container>
    <div class="row">
      <div class="col-lg-3" id="nav">
        <b-card-group deck>
          <b-card
            :header="currentNav.title"
            header-tag="header"
          >
            <b-list-group>
              <b-list-group-item
                :active="_index == index"
                v-for="(subnav, _index) in currentNav.children" 
                :key="_index">
                
                <nuxt-link :to="subnav.href" replace>{{subnav.title}}</nuxt-link>
                
              </b-list-group-item>
            </b-list-group>
          </b-card>
        </b-card-group>
      </div>

      <div class="col-lg-9" id="detail">
        <b-card
          :header="currentNav.children[index].title"
          header-tag="header"
        >
          <b-list-group>
            <b-list-group-item
              v-for="(list, _index) in currentNav.children[index].list" 
              :key="_index">
              <nuxt-link :to='`/detail?id=${list.id}&type=${currentNav.children[index].url.substring(1)}`'>
                <div>{{list.title}}</div>
                <small>{{list.updated_at}}</small>
              </nuxt-link>
            </b-list-group-item>
          </b-list-group>
        </b-card>
      </div>

      
    </div>
  </b-container>
</div>
</template>

<script>
export default {
  name: 'NewsPage',
  data () {
    return {
    }
  },
  async asyncData({route, store, query, redirect, $axios}) {
    const {index = '0' } =  query
    const { navs } = store.state
    const currentNav = navs[1]
    return {
      index,
      currentNav,
      baseUrl: process.env.baseUrl
    }
  },
  watch: {
    async '$route.query.index' (newval) {
      this.index = newval || '0'
    }
  }
}
</script>

<style>

</style>